<template>
    <div>
        <el-select v-model="value" @change='handleChange' style="margin-bottom: 10px" :clearable="clearable"
            @clear='handleClear'>
            <el-option v-for="item in times" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
        </el-select>
        <el-date-picker v-model="daterange" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" v-show="value == 'custom'" @change="handleDateRange">
        </el-date-picker>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                times: [{
                    value: 'today',
                    label: '今天'
                }, {
                    value: 'yesterday',
                    label: '昨天'
                }, {
                    value: 'week',
                    label: '本周'
                }, {
                    value: 'month',
                    label: '本月'
                }, {
                    value: 'custom',
                    label: '自定义'
                }],
                value: 'today',
                daterange: [],
                start: 'yyyy-MM-dd 00:00:00',
                end: 'yyyy-MM-dd 23:59:59'
            }
        },
        props: {
            clearable: {
                type: Boolean,
                default: false
            }
        },
        mounted() {
            this.handleChange('today')
        },
        methods: {
            // type "s"代表开始,"e"代表结束，dates不传或0代表本周，-1代表上周，1代表下周
            getMonday(type, dates) {
                let now = new Date();
                let nowTime = now.getTime();
                let day = now.getDay();
                let longTime = 24 * 60 * 60 * 1000;
                let n = longTime * 7 * (dates || 0);
                let dd
                if (type == "s") {
                    dd = nowTime - (day - 1) * longTime + n;
                };
                if (type == "e") {
                    dd = nowTime + (7 - day) * longTime + n;
                };
                dd = new Date(dd);
                let y = dd.getFullYear();
                let m = dd.getMonth() + 1;
                let d = dd.getDate();
                m = m < 10 ? "0" + m : m;
                d = d < 10 ? "0" + d : d;
                day = y + "-" + m + "-" + d;
                return day;
            },
            // type "s"代表开始,"e"代表结束，dates不传或0代表本月，-1代表上月，1代表下月
            getMonth(type, months) {
                let d = new Date();
                let year = d.getFullYear();
                let month = d.getMonth() + 1;
                if (Math.abs(months) > 12) {
                    months = months % 12;
                };
                if (months != 0) {
                    if (month + months > 12) {
                        year++;
                        month = (month + months) % 12;
                    } else if (month + months < 1) {
                        year--;
                        month = 12 + month + months;
                    } else {
                        month = month + months;
                    };
                };
                month = month < 10 ? "0" + month : month;
                let firstday = year + "-" + month + "-" + "01";
                let lastday = "";
                if (month == "01" || month == "03" || month == "05" || month == "07" || month == "08" || month ==
                    "10" || month == "12") {
                    lastday = year + "-" + month + "-" + 31;
                } else if (month == "02") {
                    if ((year % 4 == 0 && year % 100 != 0) || (year % 100 == 0 && year % 400 == 0)) {
                        lastday = year + "-" + month + "-" + 29;
                    } else {
                        lastday = year + "-" + month + "-" + 28;
                    };
                } else {
                    lastday = year + "-" + month + "-" + 30;
                };
                let day = "";
                if (type == "s") {
                    day = firstday;
                } else {
                    day = lastday;
                };
                return day;
            },
            handleDateRange(val) {
                this.$emit('getTime', {
                    timeStart: val === null ? '' : val[0].dateFormat(this.start),
                    timeEnd: val === null ? '' : val[1].dateFormat(this.end)
                })
            },
            handleClear() {
                this.$emit('handleClear')
            },
            handleChange(val) {
                const {
                    formatTime
                } = this.utils
                let payload = {
                    timeStart: '',
                    timeEnd: ''
                }
                this.daterange = []
                switch (val) {
                    case 'today':
                        payload.timeStart = new Date().dateFormat(this.start)
                        payload.timeEnd = new Date().dateFormat(this.end)
                        break;
                    case 'yesterday':
                        payload.timeStart = formatTime(new Date().getTime() - 3600 * 1000 * 24, this.start)
                        payload.timeEnd = formatTime(new Date().getTime() - 3600 * 1000 * 24, this.end)
                        break;
                    case 'week':
                        payload.timeStart = formatTime(this.getMonday("s", 0), this.start)
                        payload.timeEnd = formatTime(this.getMonday("e", 0), this.end)
                        break;
                    case 'month':
                        payload.timeStart = formatTime(this.getMonth("s", 0), this.start)
                        payload.timeEnd = formatTime(this.getMonth("e", 0), this.end)
                        break;
                }
                this.$emit('getTime', payload)
                this.$emit('changeCollapse', val == 'custom', val)
            }
        }
    }
</script>

<style lang="less" scoped>
    /deep/ .el-range-editor.el-input__inner {
        width: 100%;
    }

    /deep/ .el-range-editor .el-range-input {
        flex: 3;
    }

    /deep/ .el-date-editor .el-range-separator {
        flex: 1;
    }
</style>